<template>
    <div>
        <!--面包屑导航区域-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home_HR' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>招聘流程</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区域-->
        <el-card>
            <!--招聘列表区域-->
            <el-table :data="prolist" :border="true" :stripe="true">
                <el-table-column prop="id" label="编号"></el-table-column>
                <el-table-column prop="employee" label="应聘者"></el-table-column>
                <el-table-column prop="name" label="岗位名称"></el-table-column>
                <el-table-column prop="company" label="所属公司"></el-table-column>
                <el-table-column prop="status" label="流程状态"></el-table-column>
                <el-table-column prop="salary" label="操作">
                    <template v-slot="scope">
                        <el-button type="warning" @click="showproDialog(scope.row.id)">
                            <el-icon style="vertical-align: middle;">
                                <edit />
                            </el-icon>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--查看流程对话框-->
        <el-dialog title="应聘流程" v-model="proVisible" width="50%" @close="proDialogClosed">
            <el-steps :active="this.changeStatus.status" finish-status="success">
                <el-step title="已投递简历"></el-step>
                <el-step title="同意参加面试"></el-step>
                <el-step title="面试审核"></el-step>
                <el-step title="发放offer"></el-step>
                <el-step title="完成招聘"></el-step>
            </el-steps>
            <el-button style="margin-top: 12px;" :disable="this.changeStatus.status>2"
                @click="next(this.changeStatus.id)">下一步</el-button>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            prolist: [

            ],
            total: 0,
            //修改流程状态
            changeStatus: {
                status: 0,
                id: 0
            },
            //控制流程对话框的显示与隐藏
            proVisible: false
        }
    },
    created() {
        this.getpos_HRList();
    },
    methods: {
        async getpos_HRList() {
            const json = {
                hrID: window.sessionStorage.getItem('token')
            };
            const { data: res } = await this.$http.post('getProcessByHR', json)
            console.log(res);
            if (res.error_code !== 0) {
                return this.$message.error('获取岗位信息失败！')
            }
            this.prolist = []
            this.total = res.data.size;
            for (var i = 0; i < this.total; i++) {
                this.prolist.push({
                    id: res.data.ProcessList[i].ID,
                    employee: res.data.ProcessList[i].empID,
                    name: res.data.ProcessList[i].posName,
                    company: res.data.ProcessList[i].compName,
                    status: res.data.ProcessList[i].status
                });
            }
        },
        proDialogClosed() {
            this.proVisible = false
        },
        //展示招聘流程对话框
        async showproDialog(id) {
            const json = {
                proID: id
            };
            const { data: res } = await this.$http.post('getStatusByID' , json)
            if(res.status === -1){
                return this.$message.error('查看流程失败！')
            }
            this.changeStatus.status = res.status
            this.changeStatus.id = id
            this.proVisible = true
        },
        //流程下一步
        async next(proid) {
            if (this.changeStatus.status >= 2 && this.changeStatus.status <= 4) {
                this.changeStatus.status++;
                this.changeStatus.id = proid;
                const { data: res } = await this.$http.post('changeStatus' , this.changeStatus)
                console.log(res);
                if(res.result !== "true") {
                    return this.$message.error('查看流程失败！')
                }
            }
            this.getpos_HRList();
        }
    }
}
</script>

<style lang="less" scoped>

</style>